//pc端
@font-face {
	font-family: 'Medium';
	src: url('@/static/font/GoogleSans-Medium.ttf');
}
@font-face {
	font-family: 'Regular';
	src: url('@/static/font/GoogleSans-Regular.ttf');
}
.Medium {
	font-family: Medium;
}
.Regular {
	font-family: Regular;
}

@media screen and (max-width: 980px) {
	.top-fixed {
		display: none;
	}
	.box-center-logo2 {
		display: none;
	}

	.text-area {
		width: 750rpx;
		margin: 0 auto;
		text-align: center;

		.topBanner {
			width: 90%;
			margin: auto;
			.top-inner {
				margin-top: 12rpx;
				display: flex;
				align-items: center;
				.left-top {
					font-weight: 400;
					font-size: 42rpx;
					color: #5f6368;
					display: flex;
					align-items: center;
					justify-content: space-between;
					image {
						width: 72rpx;
						height: 72rpx;
						margin-right: 12rpx;
					}
				}
			}
			margin-bottom: 108rpx;
		}
		.flex-btw {
			width: 100%;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			text-align: center;
			margin: 54rpx 0 72rpx;

			.line-l {
				margin: 0 36rpx;
				width: 1px;
				height: 36rpx;
				background: #e8eaed;
				border-radius: 0rpx 0rpx 0rpx 0rpx;
			}
			.image1 {
				width: 24rpx;
				height: 24rpx;
			}
			.image2 {
				width: 36rpx;
				// height: 12rpx;
			}
			& > view {
				& > view:nth-of-type(1) {
					color: #202124;
					font-size: 5rpx;
					font-weight: 500;
					line-height: 30rpx;
					margin-bottom: 6rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				& > view:nth-of-type(2) {
					font-weight: 400;
					font-size: 24rpx;
					color: #5f6368;
				}
			}
		}
		.flex-un {
			display: block;
			.btn {
				width: 100%;
				height: 66rpx;
				margin: auto;
				background: #01875f;
				font-size: 24rpx;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				text-align: center;
				line-height: 66rpx;
				color: #fff;
			}

			.flex-share,
			.flex-add {
				display: inline-block;
				font-weight: 400;
				font-size: 4rpx;
				height: 36rpx;
				line-height: 36rpx;
				margin-top: 42rpx;
				image {
					width: 36rpx;
					margin-right: 18rpx;
					vertical-align: top;
				}
			}

			.flex-share {
				color: #01875f;
				margin-left: 7rpx;
			}

			.flex-add {
				color: #b5b6b7;
				margin-left: 54rpx;
			}
		}
		.banner {
			width: 100%;
			margin-bottom: 36rpx;
			margin-top: 160rpx;
			position: relative;

			.banner-box {
				width: 637rpx;
				display: flex;
				overflow: hidden;
				.backSwiper {
					image {
						width: 637rpx;
						border-radius: 10rpx;
					}
				}
			}
			.box-right {
				display: none;
				position: absolute;
				top: 50%;
				right: -15rpx;
				transform: translateY(-50%);
				width: 30rpx;
				height: 30rpx;
				background: #ffffff;
				box-shadow: 0 0rpx 4px rgba(0, 0, 0, 0.4);
				border-radius: 15rpx;
				text-align: center;
				image {
					width: 8rpx;
					height: 8rpx;
				}
			}
			.app_support {
				position: absolute;
				font-weight: 500;
				font-size: 6rpx;
				color: #202124;
				right: -50rpx;
				top: 7rpx;
				display: none;
			}
		}
		.page-under {
			width: 85%;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			font-weight: 400;
			font-size: 25rpx;
			zoom: 0.9;
			color: #5f6368;
			margin: 25rpx auto;
			view {
				margin-top: 48rpx;
				margin-right: 36rpx;
			}
			.box-under {
				display: flex;
				align-items: center;
				image {
					width: 42rpx;
					margin-right: 24rpx;
				}
			}
		}
		.box-center {
			width: 85%;
			margin: auto;
			text-align: left;
			position: relative;
			& > image {
				width: 132rpx;
				height: 132rpx;
				border: 1px solid #eeefff;
				border-radius: 20rpx;
			}
			.box-center-box {
				position: absolute;
				top: 0;
				left: 180rpx;
				font-weight: 500;
				.title-page {
					font-size: 42rpx;
					color: #000000;
				}

				.txt-green {
					font-size: 30rpx;
					color: #01875f;
					margin-top: 12rpx;
				}
			}

			.box-title {
				font-weight: 500;
				font-size: 30rpx;
				color: #202124;
				margin-bottom: 36rpx;
			}

			.box-gray {
				font-weight: 400;
				font-size: 24rpx;
				color: #5f6368;
				margin-bottom: 30rpx;
			}
			.essllip {
				display: none;
			}
			.unp {
				font-weight: 500;
				font-size: 24rpx;
				color: #202124;
			}
			.unp2023 {
				font-weight: 500;
				font-size: 4rpx;
				color: #5f6368;
				margin-top: 12rpx;
			}
			.box-box {
				display: flex;
				margin-top: 60rpx;
				margin-bottom: 48rpx;
				& > view {
					height: 55rpx;
					border-radius: 30rpx;
					border: 1px solid #dddee2;
					font-weight: 500;
					font-size: 4rpx;
					color: #5f6368;
					line-height: 55rpx;
					padding: 0 30rpx;
					text-align: center;
					margin-right: 24rpx;
				}
			}

			.XGHsbd {
				width: 100%;
				border-radius: 12rpx;
				border: 1rpx solid #dddee2;
				padding: 24rpx 0;

				.wGcURe {
					font-weight: 400;
					color: #5f6368;
					width: 500rpx;
					display: flex;
					align-items: center;
					font-size: 4rpx;
					margin-bottom: 30rpx;
					image {
						width: 36rpx;
						height: 36rpx;
						margin: 0 30rpx;
					}
					.jECfAf {
						color: rgb(95, 99, 104);
					}
				}
				.u4ICaf {
					font-weight: 400;
					font-size: 24rpx;
					color: #01875f;
					margin-top: 31rpx;
					margin-left: 45rpx;
				}
			}
			.box-bb {
				margin-top: 48rpx;
				margin-bottom: 9rpx;
				.box-t1 {
					font-weight: 500;
					font-size: 30rpx;
					color: #202124;
					margin-bottom: 30rpx;
				}
				.box-t2 {
					font-weight: 400;
					font-size: 24rpx;
					color: #5f6368;
					margin-bottom: 60rpx;
				}
			}
			.box-cho {
				display: flex;
				font-size: 24rpx;
				font-weight: 500;
				.box-c1 {
					width: 131rpx;
					height: 55rpx;
					background: #e6f3ef;
					border-radius: 30rpx;
					color: #01875f;
					margin-right: 24rpx;
					text-align: center;
					line-height: 55rpx;
				}
				.box-c2 {
					width: 131rpx;
					height: 55rpx;
					border-radius: 30rpx;
					border: 1rpx solid #dddee2;
					color: #5f6368;
					text-align: center;
					line-height: 55rpx;
				}
			}
			.box-rate {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 30rpx;
				.left-box {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					.left-l1 {
						text-align: center;
						width: 100%;
						font-weight: 500;
						font-size: 96rpx;
					}
					.left-l2 {
						display: flex;
						image {
							width: 24rpx;
							height: 24rpx;
						}
						& > image:not(.under) {
							margin-right: 12rpx;
						}
					}
					.left-l3 {
						font-weight: 400;
						font-size: 24rpx;
						color: #5f6368;
						margin-top: 24rpx;
					}
				}
				.right-box {
					margin-left: 7rpx;
					.boc-c {
						display: flex;
						align-items: center;
						font-weight: 400;
						font-size: 24rpx;
						color: #5f6368;
						& > view {
							width: 406rpx;
							margin-left: 25rpx;
							height: 18rpx;
							background: #e8eaed;
							border-radius: 12rpx;
							overflow: hidden;
							position: relative;
							margin-bottom: 12rpx;
							& > view {
								position: absolute;
								top: 0;
								left: 0;
								background: #01875f;
								height: 18rpx;
								border-radius: 12rpx;
								overflow: hidden;
							}
						}
					}
				}
			}
			.box-commit {
				margin-top: 60rpx;
				.commit-a {
					color: #5f6368;
					font-size: 24rpx;
					margin-top: 60rpx;
					.commit-a-1 {
						margin-bottom: 36rpx;
						color: #202124;
						font-weight: 400;
						display: flex;
						align-items: center;
						image {
							width: 60rpx;
							height: 60rpx;
							margin-right: 24rpx;
						}
					}
					.commit-a-2 {
						display: flex;
						align-items: center;
						margin: 36rpx 0 30rpx;
						image {
							width: 24rpx;
							height: 24rpx;
							margin-right: 10rpx;
						}
						& > image:nth-of-type(5) {
							margin-right: 24rpx;
						}
						text {
							margin-left: 5rpx;
						}
					}
					.commit-a-3 {
						margin: 30rpx 0 24rpx;
						font-size: 24rpx;
					}
					.commit-a-4 {
						margin-bottom: 24rpx;
						font-size: 24rpx;
					}
					.commit-a-5 {
						& > text:nth-of-type(1) {
							margin-left: 54rpx;
							margin-right: 24rpx;
						}
						text {
							display: inline-block;
							width: 99rpx;
							height: 47rpx;
							font-weight: 500;
							border-radius: 30rpx;
							border: 1px solid #dddee2;
							font-size: 24rpx;
							text-align: center;
							line-height: 47rpx;
						}
					}
				}
				.more-box {
					font-weight: 400;
					font-size: 24rpx;
					color: #01875f;
					text-indent: 5rpx;
					margin-top: 52rpx;
					margin-bottom: 62rpx;
				}
			}
			.whats-news {
				font-weight: 500;
				font-size: 30rpx;
				color: #202124;
				margin-top: 14rpx;
			}
			.games-news {
				font-weight: 400;
				font-size: 24rpx;
				color: #5f6368;
				margin-top: 7rpx;
			}
			.support {
				font-weight: 500;
				font-size: 30rpx;
				color: #202124;
				margin-top: 36rpx;
				margin-bottom: 30rpx;
			}
			.flag-news {
				font-weight: 500;
				font-size: 24rpx;
				color: #202124;
				text-indent: 30rpx;
			}
			.line {
				width: 100%;
				height: 1rpx;
				background: #dddee2;
				margin: 60rpx auto 0;
			}
			.page-foot {
				.foot-top {
					margin-top: 60rpx;
					font-weight: 500;
					font-size: 24rpx;
					color: #5f6368;
				}
				.foot-text {
					font-weight: 400;
					font-size: 24rpx;
					margin-top: 24rpx;
					color: #5f6368;
				}
			}

			.box-last {
				display: flex;
				align-items: center;
				margin-top: 60rpx;
				margin-bottom: 37rpx;
				image {
					width: 42rpx;
					margin-right: 24rpx;
				}
			}
			//
		}
	}
}
@media screen and (min-width: 980px) {
	.top-fixed {
		width: 100%;
		padding-top: 7rpx;
		margin-bottom: 14rpx;
		.top-inner {
			margin-left: 15rpx;
			height: 12rpx;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			image {
				width: 60rpx;
			}
			.right-top {
				display: flex;
				font-weight: 400;
				font-size: 5.5rpx;
				color: #5f6368;
				& > view {
					margin-left: 8rpx;
					text-align: center;
				}
				.light {
					color: #01875f;

					view {
						width: 12rpx;
						height: 1.5rpx;
						background: #01875f;
						margin: auto;
						position: relative;
						top: 5rpx;
						border-radius: 2rpx 2rpx 0 0;
					}
				}
			}
		}
	}
	.box-out {
		width: 500rpx;
		margin: auto;
		display: flex;
		justify-content: center;
		.box-center-logo2 {
			width: 70rpx;
			height: 70rpx;
			image {
				width: 70rpx;
				height: 70rpx;
				border-radius: 10rpx;
				border: 1px solid #eaeaea;
			}
		}
	}
	.text-area {
		width: 420rpx;
		margin: 0 auto;
		text-align: center;

		.topBanner {
			display: none;
		}

		.box-center {
			width: 420rpx;
			margin: auto;
			text-align: left;
			position: relative;
			& > image {
				display: none;
			}
			.title-page {
				font-weight: 500;
				font-size: 19rpx;
				color: #000000;
			}

			.txt-green {
				font-weight: 500;
				font-size: 6rpx;
				color: #01875f;
				margin-top: 3rpx;
			}

			.box-title {
				font-weight: 500;
				font-size: 8rpx;
				color: #202124;
			}

			.box-gray {
				font-weight: 400;
				width: 320rpx;
				font-size: 5rpx;
				color: #5f6368;
				margin-top: 10rpx;
			}
			.unp {
				font-weight: 500;
				font-size: 5rpx;
				color: #202124;
				padding-top: 7rpx;
			}
			.unp2023 {
				font-weight: 500;
				font-size: 5rpx;
				color: #5f6368;
				margin-top: 2rpx;
			}
			.box-box {
				display: flex;
				& > view {
					border-radius: 12rpx;
					border: 1px solid #dddee2;
					font-weight: 500;
					font-size: 4rpx;
					color: #5f6368;
					line-height: 9rpx;
					padding: 0 6rpx;
					text-align: center;
					margin-right: 4rpx;
					margin-top: 9rpx;
					margin-bottom: 14rpx;
				}
				.aJ3edd:hover {
					background-color: #f7f8f8;
				}
			}

			.XGHsbd {
				width: 320rpx;
				border-radius: 4rpx;
				border: 1rpx solid #dddee2;

				.wGcURe {
					padding: 7rpx 0;
					font-weight: 400;
					color: #5f6368;
					margin-left: 7rpx;
					display: flex;
					font-size: 4rpx;
					image {
						width: 6rpx;
						height: 6rpx;
						margin-right: 7rpx;
					}
					.jECfAf {
						color: rgb(95, 99, 104);
					}
				}
				.u4ICaf {
					font-weight: 400;
					width: 30rpx;
					line-height: 12rpx;
					text-align: center;
					font-size: 5rpx;
					color: #01875f;
					margin-bottom: 5rpx;
					margin-left: 7rpx;
					border-radius: 2rpx;
				}
				.u4ICaf:hover {
					background-color: #f6fafe;
				}
			}
			.box-bb {
				width: 320rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 10rpx;
				margin-bottom: 5rpx;
				height: 16rpx;
				.box-t1 {
					font-weight: 500;
					font-size: 8rpx;
					color: #202124;
				}
				.box-t2 {
					font-weight: 400;
					font-size: 5rpx;
					color: #5f6368;
					text-align: center;
					line-height: 16rpx;
					width: 90rpx;
					border-radius: 2rpx;
				}
				.box-t2:hover {
					background-color: #f7f8f8;
				}
			}
			.box-cho {
				display: flex;
				font-size: 6rpx;
				font-weight: 500;
				.box-c1 {
					width: 35rpx;
					height: 12rpx;
					background: #e6f3ef;
					border-radius: 15rpx;
					color: #01875f;
					margin-right: 5rpx;
					text-align: center;
					line-height: 12rpx;
				}
				.box-c1:hover {
					background-color: #dde9e6;
				}
				.box-c2 {
					width: 35rpx;
					height: 12rpx;
					border-radius: 15rpx;
					border: 1px solid #dddee2;
					// color: #5f6368;
					text-align: center;
					line-height: 12rpx;
					overflow: hidden;
				}
				.box-c2:hover {
					background-color: #f7f8f8;
				}
			}
			.box-rate {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 10rpx;
				margin-bottom: 15rpx;
				font-size: 5rpx;
				width: 320rpx;
				.left-box {
					display: flex;
					flex-direction: column;
					.left-l1 {
						font-weight: 500;
						font-size: 18rpx;
						color: #202124;
					}
					.left-l2 {
						display: flex;
						image {
							width: 6rpx;
							height: 6rpx;
							margin-right: 2rpx;
						}
					}
					.left-l3 {
						font-weight: 400;
						color: #5f6368;
						margin-top: 4rpx;
					}
				}
				.right-box {
					margin-left: 7rpx;
					.boc-c {
						width: 280rpx;
						display: flex;
						align-items: center;
						font-weight: 400;
						font-size: 4rpx;
						color: #5f6368;
						& > view {
							width: 280rpx;
							margin-left: 5rpx;
							height: 4rpx;
							background: #e8eaed;
							border-radius: 2rpx;
							overflow: hidden;
							position: relative;
							margin-bottom: 2rpx;
							& > view {
								position: absolute;
								top: 0;
								left: 0;
								background: #01875f;
								height: 4rpx;
								border-radius: 2rpx;
								overflow: hidden;
							}
						}
					}
				}
			}
			.box-commit {
				.commit-a {
					color: #5f6368;
					font-size: 5rpx;
					margin-top: 10rpx;
					.commit-a-1 {
						margin-bottom: 8rpx;
						color: #202124;
						font-weight: 400;
						display: flex;
						align-items: center;
						height: 9rpx;
						image {
							width: 12rpx;
							height: 12rpx;
							margin-right: 6rpx;
						}
					}
					.commit-a-2 {
						display: flex;
						align-items: center;
						image {
							width: 4rpx;
							height: 4rpx;
							margin-right: 2rpx;
						}
						text {
							margin-left: 5rpx;
						}
					}
					.commit-a-3 {
						width: 320rpx;
						margin: 4rpx 0;
					}
					.commit-a-4 {
						margin-bottom: 4rpx;
					}
					.commit-a-5 {
						& > text {
							display: inline-block;
							width: 20rpx;
							height: 8rpx;
							font-weight: 500;
							border-radius: 12rpx 12rpx 12rpx 12rpx;
							border: 1px solid #dddee2;
							margin: 0 0 0 5rpx;
							text-align: center;
							line-height: 8rpx;
							font-size: 5rpx;
						}
						& > text:hover {
							background-color: #f7f8f8;
						}
					}
				}
				.more-box {
					width: 40rpx;
					line-height: 10rpx;
					font-weight: 400;
					font-size: 5rpx;
					color: #01875f;
					text-indent: 5rpx;
					margin-top: 4rpx;
					padding: 2rpx 5rpx;
					border-radius: 3rpx;
				}
				.more-box:hover {
					background-color: #f6fafe;
				}
			}
			.whats-news {
				font-weight: 500;
				font-size: 7rpx;
				color: #202124;
				margin-top: 6rpx;
			}
			.games-news {
				font-weight: 400;
				font-size: 4rpx;
				color: #5f6368;
				margin-top: 7rpx;
			}
			.support {
				display: none;
			}
			.flag-news {
				font-weight: 500;
				font-size: 4rpx;
				color: #202124;
				text-indent: 5rpx;
				margin-top: 14rpx;
			}
			.line {
				width: 320rpx;
				height: 1rpx;
				background: #dddee2;
				border-radius: 0rpx 0rpx 0rpx 0rpx;
				margin: 19rpx 0 14rpx;
			}
			.page-foot {
				display: flex;
				.foot-top {
					font-weight: 500;
					font-size: 5rpx;
					color: #5f6368;
				}
				.foot-text {
					margin-top: 5rpx;
					font-weight: 400;
					font-size: 5rpx;
					color: #5f6368;
				}
				.foot-text:hover {
					color: #1c9687;
				}
			}

			//
		}
		.page-under {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			width: 400rpx;
			font-weight: 400;
			font-size: 5rpx;
			color: #5f6368;
			margin-top: 18rpx;
			margin-bottom: 18rpx;
			view {
				margin: 0 9rpx 0 0;
				display: flex;
				image {
					width: 7rpx;
					margin-right: 2rpx;
				}
			}
		}
	}

	.flex-btw {
		// width: 50%;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin: 9rpx 0 20rpx;

		.flex-b1 {
			image {
				width: 5rpx;
				// height: 12rpx;
			}
			& > view:nth-of-type(1) {
				color: #202124;
				font-size: 5rpx;
				height: 18rpx;
				line-height: 18rpx;
				text-align: center;
			}

			& > view:nth-of-type(2) {
				font-weight: 400;
				font-size: 4rpx;
				color: #5f6368;
			}
		}

		.line-l {
			margin: 0 6rpx;
			width: 1px;
			height: 7rpx;
			background: #e8eaed;
			border-radius: 0rpx 0rpx 0rpx 0rpx;
		}
		.btn {
			width: 75rpx;
			height: 18rpx;
			text-align: center;
			line-height: 18rpx;
			font-size: 6rpx;
			color: #fff;
			background: #01875f;
			border-radius: 3rpx;
		}
		.btn:hover {
			background-color: #056449;
		}

		.flex-share,
		.flex-add {
			font-weight: 400;
			font-size: 4rpx;
			display: flex;
			align-items: center;
			image {
				width: 6rpx;
				margin-right: 2rpx;
			}
		}

		.flex-share {
			display: flex;
			justify-content: center;
			width: 35rpx;
			height: 17rpx;
			color: #01875f;
			margin-left: 4rpx;
			border-radius: 2rpx;
		}
		.flex-share:hover {
			background-color: #f5f5f5;
		}
		.flex-add {
			color: #b5b6b7;
			margin-left: 3rpx;
		}
	}
	.banner {
		margin-bottom: 14rpx;
		position: relative;
		width: 320rpx;

		.banner-box {
			display: flex;
			overflow-x: hidden;

			image {
				width: 200rpx;
				margin-right: 12rpx;
				border-radius: 5rpx;
			}
		}
		.box-right {
			position: absolute;
			top: 50%;
			right: -8rpx;
			transform: translateY(-50%);
			width: 16rpx;
			height: 16rpx;
			background: #ffffff;
			box-shadow: 0 0rpx 4px rgba(0, 0, 0, 0.4);
			border: 1rpx solid #ffffff;
			border-radius: 8rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			image {
				width: 8rpx;
				height: 8rpx;
			}
		}
		.box-right:hover {
			background-color: #f7f8f8;
		}
		.app_support {
			position: absolute;
			font-weight: 500;
			font-size: 6rpx;
			color: #202124;
			right: -50rpx;
			top: 7rpx;
		}
	}
	.box-last {
		display: none;
	}
}

// 点击
.class-text-hover {
	width: 16rpx;
	height: 7rpx !important;
	background-color: #d0d1d1 !important;
}
.class-more-box-hover {
	background-color: #dceafb !important;
}
.class-flex-hover {
	background-color: #dceafb !important;
	border-radius: 2rpx;
}
.class-u4ICaf-hover {
	background-color: #dceafb !important;
}
.class-box-t2-hover {
	background-color: #dcdede !important;
}
.class-box-righ-hover {
	background-color: #e8e9e9 !important;
	border: 1rpx solid #00aaff !important;
}
.class-box-c1-hover {
	background-color: #a7b0ae !important;
}
.class-box-c2-hover {
	background-color: #b8b8b8 !important;
}
